<!DOCTYPE html>
<!-- 作业：利用节点关系，假设当前节点为PHP 3班，分别访问到PHP 1班、PHP 2班、美工1班和美工 3班，并输出他们的值。
 -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function change() {
		// 	当前节点信息
		var nNode = document.getElementById("PHP3");
		alert(nNode.nodeName);
		alert(nNode.innerHTML);
		// 	父节点信息
		var pNode = pNode.parentNode;
		alert(pNode.nodeName);
		alert(pNode.innerHTML);
		// 	父节点的第一个子节点
		var fNode = nNode.parentNode.firstChild();
		alert(fNode.nodeName);
		alert(fNode.innerHTML);
		// 	父节点的最后一个子节点
		var lNode = nNode.parentNode.lastChild();
		alert(lNode.nodeName);
		alert(lNode.innerHTML);
		// 	当前节点的前一个兄弟节点
		var pNode = nNode.previousSibling();
		alert(pNode.nodeName);
		alert(pNode.innerHTML);
		// 	当前节点后一个节点
		var nNode = nNode.nextSibling();
		alert(nNode.nodeName);
		alert(nNode.nodeName);
	}
</script>
</head>
<body>
	<ol id="myClass">
		<lei id="PHP1">PHP1班</lei>
		<lei id="PHP2">PHP2班</lei>
		<lei id="PHP3">PHP3班</lei>
		<lei id="美工1">美工1班</lei>
		<lei id="美工2">美工2班</lei>
		<lei id="美工3">美工3班</lei>
	</ol>
	<input type="button" value="获取节点关系" onclick="change()">

</body>
</html>